<template>
  <div class="comment-bd">
    <detail-title icon="icon-haoping"
    title="评论关键词"
    ></detail-title>
    <div class="keyword-wrap">
      <span class="keyword"
      v-for="(item, index) of keyData"
      :key="index"
      > {{ item }}</span>
    </div>
  </div>
</template>

<script>
import DetailTitle from './Title.vue'
export default {  
  name: 'DetailCommentKeyword',
  components: {
    DetailTitle,
  },
  props: {
    keyData: Array,
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/variables.scss';
.comment-bd {
  margin-top: .1rem;
  border-radius: .1rem;
  overflow: hidden;
}
.keyword-wrap {
  box-sizing: border-box;
  padding: .1rem;
  background-color: #fff;
  .keyword {
    display: inline-block;
    padding: .05rem;
    font-size: .14rem;
    color: $defaultGreen;
    border: 1px solid $defaultGreen;
    margin: .015rem;
    border-radius: .05rem;
  }
}
</style>